<template>
  <div>
    <van-submit-bar :price="getSum" button-text="在线支付" @submit="onSubmit" />
    <van-password-input
      :value="value"
      info="密码为 6 位数字"
      :error-info="errorInfo"
      :focused="showKeyboard"
      @focus="showKeyboard = true"
      v-if="showKeyboard"
      :length="6"
    />
    <van-number-keyboard
      v-model="value"
      :show="showKeyboard"
      @blur="showKeyboard = false"
    />
    <van-loading color="#CD3131" v-if="loading" size="50" />
  </div>
</template>

<script>
import Vue from "vue";
import { SubmitBar, PasswordInput, NumberKeyboard, Loading ,Toast } from "vant";
import { deleteCartItem } from "../../apis/order";
Vue.use(SubmitBar);
Vue.use(PasswordInput);
Vue.use(NumberKeyboard);
Vue.use(Loading);
Vue.use(Toast);

export default {
  name: "SubmitBar",
  props: ["list"],
  data() {
    return {
      value: "",
      showKeyboard: false,
      errorInfo: "",
      loading: false,
    };
  },

  mounted() {},

  methods: {
    onSubmit() {
      this.showKeyboard = true;
    },
  },
  computed: {
    getSum() {
      return this.list.reduce(
        (sum, item) => (sum += item.originprice * item.num * 100),
        0
      );
    },
  },

  watch: {
    value(value) {
      if (value.length === 6 && value !== "666666") {
        this.errorInfo = "密码错误";
        this.loading = false;
      } else if (value.length === 6 && value == "666666") {
        this.errorInfo = "密码正确";
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          Toast.success('支付成功');
          this.$router.push("/payend");
          deleteCartItem({userid:localStorage.getItem("userid")}).then()
        }, 1000);
      } else {
        this.errorInfo = "";
        this.loading = false;
      }
    },
  },
};
</script>

<style  scoped>
.van-password-input {
  position: fixed;
  bottom: 2.5rem;
  z-index: 100;
  right: 0;
  left: 0;
}
.van-loading {
  position: fixed;
  top: 30%;
  right: 48%;
  z-index: 999;
}
</style>